<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="">
          <GradeSelect v-model="searchForm.grade" />
        </el-form-item>
        <el-form-item>
          <ClassSelect v-model="searchForm.class" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.type" placeholder="请选择测试类型" filterable clearable>
            <el-option label="职业兴趣" :value="1" />
            <el-option label="多元智能" :value="2" />
            <el-option label="职业价值观" :value="3" />
            <el-option label="MBTI性格" :value="4" />
            <el-option label="成长环境" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.type_result" placeholder="请选择类型结果" filterable clearable>
            <!--            职业兴趣-->
            <el-option label="R型(现实型)" value="R型(现实型)" />
            <el-option label="S型(社会型)" value="S型(社会型)" />
            <el-option label="C型(事务型)" value="C型(事务型)" />
            <el-option label="I型(研究型)" value="I型(研究型)" />
            <el-option label="A型(艺术型)" value="A型(艺术型)" />
            <el-option label="E型(企业型)" value="E型(企业型)" />
            <!--            职业价值观-->
            <el-option label="利他主义" value="利他主义" />
            <el-option label="追求新意" value="追求新意" />
            <el-option label="人际关系" value="人际关系" />
            <el-option label="轻松舒适" value="轻松舒适" />
            <el-option label="安全稳定" value="安全稳定" />
            <el-option label="社会交往" value="社会交往" />
            <el-option label="经济报酬" value="经济报酬" />
            <el-option label="权利控制" value="权利控制" />
            <el-option label="社会地位" value="社会地位" />
            <el-option label="自主独立" value="自主独立" />
            <el-option label="成就动机" value="成就动机" />
            <el-option label="智力刺激" value="智力刺激" />
            <el-option label="审美主义" value="审美主义" />
            <!--            MBTI-->
            <el-option label="ENFJ型" value="ENFJ型" />
            <el-option label="ENFP型" value="ENFP型" />
            <el-option label="ENTJ型" value="ENTJ型" />
            <el-option label="ENTP型" value="ENTP型" />
            <el-option label="ESFJ型" value="ESFJ型" />
            <el-option label="ESFP型" value="ESFP型" />
            <el-option label="ESTJ型" value="ESTJ型" />
            <el-option label="ESTP型" value="ESTP型" />
            <el-option label="INFJ型" value="INFJ型" />
            <el-option label="INFP型" value="INFP型" />
            <el-option label="INTJ型" value="INTJ型" />
            <el-option label="INTP型" value="INTP型" />
            <el-option label="ISFJ型" value="ISFJ型" />
            <el-option label="ISFP型" value="ISFP型" />
            <el-option label="ISTJ型" value="ISTJ型" />
            <el-option label="ISTP型" value="ISTP型" />
            <!--            多元智能-->
            <el-option label="言语-语言智能" value="言语-语言智能" />
            <el-option label="数理-逻辑智能" value="数理-逻辑智能" />
            <el-option label="视觉-空间智能" value="视觉-空间智能" />
            <el-option label="身体-动觉智能" value="身体-动觉智能" />
            <el-option label="人际-交际智能" value="人际-交际智能" />
            <el-option label="自我-内省智能" value="自我-内省智能" />
            <el-option label="自然-观察智能" value="自然-观察智能" />
            <!--            成长环境-->
            <el-option label="家庭接纳-随意" value="家庭接纳-随意" />
            <el-option label="家庭接纳-慈爱" value="家庭接纳-慈爱" />
            <el-option label="家庭回避-忽视" value="家庭回避-忽视" />
            <el-option label="家庭回避-拒绝" value="家庭回避-拒绝" />
            <el-option label="家庭过度关心-过度保护" value="家庭过度关心-过度保护" />
            <el-option label="家庭过度关心-过度要求" value="家庭过度关心-过度要求" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.search" placeholder="请输入学生姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="user_id" label="学生ID" />
        <el-table-column prop="user_info.name" label="姓名/昵称" />
        <el-table-column prop="user_info.grade.grade_name" label="年级" />
        <el-table-column prop="user_info.class_name" label="班级" />
        <el-table-column prop="character" label="最近测试类型结果" align="center" />
        <el-table-column label="最近测试时间" align="center" prop="create_time" />
        <el-table-column label="操作" align="center">
          <template slot-scope="t">
            <el-button type="text" @click="handleView(t.row)">查看类型报告</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <div>
        <el-pagination
          class="pagination"
          :current-page="table.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </WrapPagination>

    <div>
      <!--      <MBTIBarNegative v-if="true" cid="1" :y-data="JSON.stringify(testData)" />-->
      <el-dialog :visible.sync="visible.interest" width="80%" :title="dialog.title[currentRow.type]">
        <el-form :inline="true" label-width="40px">
          <el-form-item label="姓名">
            <el-input :disabled="true" :value="currentRow.user_info.name" />
          </el-form-item>
          <el-form-item label="年级">
            <el-input :disabled="true" :value="currentRow.user_info.grade.grade_name" />
          </el-form-item>
          <el-form-item label="班级">
            <el-input :disabled="true" :value="currentRow.user_info.class_name" />
          </el-form-item>
          <el-form-item label="测试时间" label-width="80px">
            <el-input :disabled="true" :value="currentRow.user_info.create_time" />
          </el-form-item>
        </el-form>
        <el-tabs>
          <el-tab-pane label="图表">
            <div style="text-align: center;">
              <Radar v-if="currentRow.type === 1" cid="1" :y-data="dialog.interestData" />
              <IntelligenceRadar v-if="currentRow.type === 2" cid="1" :y-data="dialog.interestData" />
              <WorthBar v-if="currentRow.type === 3" cid="1" :y-data="dialog.interestData" name="职业价值观" />
              <!--            <MBTIBarNegative v-if="currentRow.type === 4" cid="1" :y-data="dialog.interestData" />-->
              <GrownPie v-if="currentRow.type === 5" :y-data="dialog.interestData" cid="1" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="结果说明">
            <el-form>
              <el-form-item>
                <el-radio-group v-model="dialog.type" @change="handleChangeType">
                  <el-radio v-for="x in aCharacter" :key="x" style="margin-bottom: 10px;" border :label="x">{{ x }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div>
              <div>
                <h3>结果说明</h3>
                <div>
                  {{ dialog.explain }}
                </div>
              </div>
              <div>
                <h3>
                  推荐专业
                </h3>
                <div>
                  {{ dialog.major }}
                </div>
              </div>
              <div>
                <h3>职业特征</h3>
                <div>
                  {{ dialog.feature }}
                </div>
              </div>
              <div>
                <h3>典型职行业</h3>
                <div>
                  {{ dialog.profession }}
                </div>
              </div>
              <div>
                <h3>专家建议</h3>
                <div>
                  {{ dialog.suggest }}
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { TableMixin } from '../../components/mixin'
import { getOutComes, getResult } from '../../api/statistics'
import GradeSelect from './components/grade-select'
import ClassSelect from './components/class-select'
import Radar from '../../components/Chart/radar'
import IntelligenceRadar from '../../components/Chart/intelligence-radar'
import WorthBar from '../../components/Chart/WorthBar'
// import MBTIBarNegative from '../../components/Chart/MBTIBarNegative'
import GrownPie from '../../components/Chart/GrownPie'
export default {
  name: 'CareerComplex',
  components: {
    GradeSelect: GradeSelect,
    Radar: Radar,
    IntelligenceRadar: IntelligenceRadar,
    GrownPie: GrownPie,
    // MBTIBarNegative: MBTIBarNegative,
    WorthBar: WorthBar,
    ClassSelect: ClassSelect
  },
  mixins: [TableMixin],
  data() {
    return {
      visible: {
        interest: false
      },
      testData: [{ 'typr': 'E', 'count': 10 }, { 'typr': 'I', 'count': 5 }, { 'typr': 'S', 'count': 8 }, { 'typr': 'N', 'count': 7 }, { 'typr': 'J', 'count': 10 }, { 'typr': 'P', 'count': 5 }, { 'typr': 'T', 'count': 5 }, { 'typr': 'F', 'count': 10 }],
      testData2: [2, 4, 6, 2, 0, 0],
      currentRow: {
        user_info: {
          grade: {}
        },
        character: ''
      },
      dialog: {
        type: '',
        tag: 1,
        explain: '',
        feature: '',
        suggest: '',
        major: '',
        profession: '',
        suggests: '',
        interestData: '[]',
        title: {
          1: '职业兴趣测试报告',
          2: '多元智能测试报告',
          3: '职业价值观测试报告',
          4: 'MBTI性格测试报告',
          5: '成长环境测试报告'
        }
      },
      searchForm: {
        grade: '',
        search: '',
        class: '',
        type: '',
        type_result: ''
      }
    }
  },
  computed: {
    aCharacter() {
      return this.currentRow.character.split('+')
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      return this.wrapList(getOutComes, this.searchForm)
    },
    handleChangeType(val) {
      console.log(val)
      this.getResult(val)
    },
    getResult(type) {
      const loading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)',
        text: '加载中'
      })
      getResult({
        type: type
      }).then(res => {
        console.log(res)
        this.dialog.feature = res.feature
        this.dialog.suggest = res.suggest
        this.dialog.explain = res.explain
        this.dialog.major = res.major
        this.dialog.profession = res.profession
        this.visible.interest = true
      }).finally(() => {
        loading.close()
      })
    },
    handleView(row) {
      console.log(row)
      this.currentRow = row
      const aCharacter = row.character.split('+')
      this.dialog.type = aCharacter[0]
      this.dialog.interestData = row.character_set
      this.getResult(aCharacter[0])
    },
    handleCloseReportDialog() {
      this.visibleReport = false
    }
  }
}
</script>

<style scoped>

</style>
